<template>
  <div class="user">
    <basic-container>
      <avue-crud
        ref="crud"
        v-model="form"
        :search.sync="search"
        :option="option"
        :page="page"
        :table-loading="listLoading"
        :before-open="handleOpenBefore"
        :data="list"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-click="rowClick"
      >
        <template slot="tabForm" slot-scope="scope">
          <div>
            <avue-form ref="avueForm" v-model="editForm" :option="formOption" />
            <option-tab :data="scope.row" />
          </div>
        </template>
        <!--  -->
        <template slot="menuLeft">
            <el-button
            @click="topHandleUpdate()"
          >表单开发
          </el-button>
        </template>
        <!--  -->

        <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,scope.index)"
          >表单开发
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>

</template>

<script>
// import { doGet, doPost, doDelet, doPut } from '@/router/axios'
import { formCreate } from "@/api/index";

export default {
  name: 'Option',
  components: {

  },
  data() {
    return {
      id: this.$route.query.id,
      option: tableOption,
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条,
        isAsc: false// 是否倒序
      },
      list: [],
      listLoading: false,
      form: {

      },
      search: {
        catalogName: ''
      },
      editForm: {
        name: ''
      },
      formOption: {
        menuBtn: false,
        column: [
          {
            label: '表名',
            prop: 'name',
            rules: [
              {
                required: true,
                trigger: 'blur',
                message: '请输入表名'
              }
            ]
          }
        ]
      }
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  methods: {
    rowClick(row,event,column) {
      //  this.selectionClear()
       console.log(row,event,column,'row,event,column')
       console.log(this.$refs.crud,'this.$refs.crud')
      // 点击表格行
      if (this.$refs.crud.$refs.table) {
        this.$refs.crud.$refs.table.clearSelection();
      }
      this.$refs.crud.$refs.table.toggleRowSelection(row, true);
    },
    // 查询列表
    getList(page, params) {
      this.querySourceTable(params)
    },
    tableInfo(row, done, loading) {
      // this.listLoading = true
      const params = {}
      params.tableName = row.tableName
      params.databaseId = row.databaseId
      params.tableDes = row.remarks
      // doGet('/dynamic/queryColumn', params).then(res => {
      //   if (res.data.code === 200) {
      //     this.$notify.success('获取成功')
      //   }
      //   this.listLoading = false
      // }).catch(() => {
      //   loading()
      // })
       formCreate.dynamicQueryColumn(params).then(res => {
        if (res.code === 200) {
          this.$notify.success('获取成功')
        }
        // this.listLoading = false
      }).catch(() => {
        loading()
      })
    },
    // 查询数据库列表
    querySourceTable(param) {
      const params = {
        id: this.id,
        ...this.search,
        ...param
      }
      console.log(params)
      params.current = this.page.current - 1
      params.size = this.page.size
      // this.listLoading = true
      // doGet('/dynamic/queryTable', params).then(res => {
      //   this.list = res.data.dataList
      //   this.page.total = res.data.totalElements
      //   this.listLoading = false
      // }).catch((e) => {
      //   this.listLoading = false
      // })
      formCreate.dynamicQueryTable(params).then(res => {
        this.list = res.dataList
        this.page.total = res.totalElements
        // this.listLoading = false
      }).catch((e) => {
        // this.listLoading = false
      })
    },

    sizeChange(size) {
      this.page.size = size
    },
    currentChange(current) {
      this.page.current = current
    },
    handleFilter(param, done) {
      this.page.current = 1
      this.querySourceTable(param)
      // this.getList(this.page, param)
      done()
    },
    handleRefreshChange(param) {
      this.querySourceTable()
    },
    handleOpenBefore(show, type) {
      window.boxType = type
      // 若是编辑、查看回显名称
      if (['edit', 'views'].includes(type)) {

      } else if (type === 'add') {

      }
      show()
    },
    topHandleUpdate(){
        let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
       selection[0].databaseName = this.$route.query.databaseName,
       this.$router.push({
        path: `/online/table/option`,
        query: selection[0]
      })
    },
    handleUpdate(row, index) {
      console.log(row)
      row.databaseName = this.$route.query.databaseName,
      this.$router.push({
        // path: `/online/tableInfo/option/${row.id}`,
        path: `/online/table/option`,
        query: row
      })
    }
  }
}

export const tableOption = {
  border: false,
  index: true,
  indexLabel: '序号',
  stripe: false,
  menuAlign: 'center',
  menuWidth: 120,
  searchMenuSpan: 6,
  editBtn: false,
  delBtn: false,
  align: 'center',
  addBtn: false,
  selection: true,
  menu: false,
  // dialogWidth: '1000',
  column: [
    {
      fixed: true,
      label: '',
      hide: true,
      prop: 'databaseId',
      editDisplay: false,
      addDisplay: false
    },
    {
      fixed: true,
      label: '数据库',
      prop: 'tableSchem',
      editDisplay: false,
      addDisplay: false,
      searchLabelWidth: '60',
      span: 12,
      searchValue: '123'
    },
    {
      fixed: true,
      label: '表名',
      prop: 'tableName',
      editDisplay: false,
      addDisplay: false,
      search: false,
      searchLabelWidth: '50',
      span: 12
    },
    {
      fixed: true,
      label: '表描述',
      search: true,
      prop: 'remarks',
      editDisplay: false,
      addDisplay: false,
      search: false,
      searchLabelWidth: '80',
      span: 12
    },
    {
      fixed: true,
      label: '编码',
      prop: 'collation',
      editDisplay: false,
      addDisplay: false,
      searchLabelWidth: '60',
      span: 12
    },
    {
      fixed: true,
      label: '引擎类型',
      prop: 'engine',
      editDisplay: false,
      addDisplay: false,
      searchLabelWidth: '60',
      span: 12
    },
    {
      fixed: true,
      label: '创建时间',
      prop: 'createTime',
      editDisplay: false,
      addDisplay: false,
      searchLabelWidth: '60',
      span: 12
    },
    {
      fixed: true,
      label: '更新时间',
      prop: 'updateTime',
      editDisplay: false,
      addDisplay: false,
      searchLabelWidth: '60',
      span: 12
    },
    {
      labelWidth: 0,
      label: '',
      prop: 'tab',
      span: 24,
      hide: true,
      formslot: true
    }
  ]
}

</script>
<style lang="scss" scoped>
/deep/.avue-crud__right {
  /deep/.el-button{
    min-width: 10px;
  }
}
</style>
